<template>
  <div class='edit-userInfo-container'
       v-if="visible">
    <el-dialog :visible.sync="visible"
               title="完善信息"
               :before-close="handleClose">
      <el-form :model="userInfoForm"
               label-width="150px"
               :rules="userInfoFormRules"
               v-if="step===1"
               ref="userInfoForm">

        <el-row>
          <el-col :span="16">
            <el-form-item prop="real_name"
                          label="真实姓名">
              <el-input v-model="userInfoForm.real_name"
                        placeholder="请输入真实姓名">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item prop="job"
                          label="岗位职务">
              <el-input v-model="userInfoForm.job"
                        placeholder="请输入岗位职务">
              </el-input>
            </el-form-item>

          </el-col>
        </el-row>
      </el-form>

      <!-- 下一步 -->
      <el-form :model="companyInfoForm"
               label-width="150px"
               :rules="companyInfoFormRules"
               v-show="step===2"
               ref="companyInfoForm">
        <el-row>
          <el-col :span="16">
            <el-form-item label="单位类型"
                          prop="company_type">
              <el-select v-model="companyInfoForm.company_type"
                         @change="onUnitType">
                <el-option v-for="(item,i) in companyTypeArr"
                           :key="i"
                           :label="item.name"
                           :value="item.value">

                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="单位名称"
                          prop="company_name">
              <el-input v-model="companyInfoForm.company_name">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="单位地址"
                          prop="area_no">
              <LocationSelect :locaData.sync="companyInfoForm"></LocationSelect>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="详细地址"
                          prop="detail_addr">
              <el-input v-model="companyInfoForm.detail_addr">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="法人姓名"
                          prop="legal_name">
              <el-input v-model="companyInfoForm.legal_name">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="统一社会信用代码"
                          prop="credit_code">
              <el-input v-model="companyInfoForm.credit_code">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label='相关证件'
                          prop="imgpath">

              <el-upload class="business-logo-upload img-upload"
                         :http-request="uploadBusinessImg"
                         action=""
                         :show-file-list="false"
                         :on-success="handleCompanylogoSuccess"
                         :before-upload="beforeCompanylogoUpload"
                         :data="companyLogoInfo"
                         accept="jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF">
                <img :src="companyInfoForm.credit_img"
                     v-if="companyInfoForm.credit_img"
                     class="logo">
                <i v-else
                   class="el-icon-plus logo-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button v-if="step===1"
                   type="primary"
                   @click="onBack">
          返 回
        </el-button>
        <el-button v-if="step===2"
                   @click="step=1"
                   type="primary">
          上一步
        </el-button>
        <el-button type="primary"
                   @click="onSave">保 存</el-button>
        <el-button type="primary"
                   @click="onNext"
                   v-if="step===1">
          下一步</el-button>
        <el-button v-if="step===2"
                   type="primary"
                   @click="onSubmit">
          提 交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import LocationSelect from '@/components/LocationSelect/LocationSelect'
import { UploadFileApi } from '@/services/UserPermission'
import { standardCodeApi } from '@/services/StandardCode'
import { PerfectingInfApi } from '@/services/PerfectingInformation'
export default {
  props: {
    dialogVisible: Boolean,
    catchBack: Function,
    catchSave: Function
  },
  data () {
    return {
      companyTypeArr: [],
      phone: '',
      PerfectingInformation: {
        real_name: '',
        post_job: '',
        company_type: '',
        credit_img: '',
        company_name: '',
        detail_addr: '',
        legal_name: '',
        credit_code: '',
        company_addrArr: ''
      },
      visible: false,
      // 步骤流程
      step: 1,
      // 用户信息表单
      userInfoForm: {
        real_name: '',
        job: ''
      },
      userInfoFormRules: {
        real_name: [
          { required: true, message: '真实姓名不能为空', trigger: 'change' },
          { required: true, message: '真实姓名不能为空', trigger: 'blur' }
        ]
      },
      // 单位信息表单
      companyInfoForm: {
        imgpath: '',
        credit_img: '',
        company_type: '',
        company_name: '',
        detail_addr: '',
        legal_name: '',
        credit_code: '',
        company_addrArr: '',
        area_no: ''
      },
      companyInfoFormRules: {
        company_type: [
          { required: true, message: '单位类型不能为空', trigger: 'change' }
        ],
        company_name: [
          { required: true, message: '单位类型不能为空', trigger: 'change' }
        ],
        area_no: [
          { required: true, message: '单位地址不能为空(省、市、区)', trigger: 'change' }
        ],
        detail_addr: [
          { required: true, message: '详细地址不能为空', trigger: 'change' }
        ],
        legal_name: [
          { required: true, message: '法人姓名不能为空', trigger: 'change' }
        ],
        credit_code: [
          { required: true, message: '统一社会信用代码不能为空', trigger: 'change' }
        ],
        imgpath: [
          { required: true, message: '相关证件不能为空', trigger: 'change' }
        ]
      },
      companyLogoInfo: {},
      // 登录时获取的用户信息
      userInfo: {},
      // 登录时获取的单位信息
      companyInfo: {}
    }
  },
  components: {
    LocationSelect
  },
  methods: {
    // 下一步
    onNext () {
      this.$refs.userInfoForm.validate((valid) => {
        if (valid) {
          // this.$refs.companyInfoForm.resetFields()
          if (this.userInfo.comp_id) {
            this.submitUserInfo()
          } else {
            this.step = 2
          }
        }
      })

      // if (this.userInfoForm.real_name !== '') {
      //   this.step = 2
      // } else {
      //   this.$refs.userInfoForm.validateField('real_name', (real_nameError) => {
      //     console.log(`${real_nameError}***************************`)

      //     if (!real_nameError) {
      //     }
      //   })
      // }
    },
    handleClose (done) {
      this.catchBack('SUCCESS')
      done()
    },
    // 当前用户是单位普通用户时，只提交个人信息
    submitUserInfo () {
      PerfectingInfApi.onSubmitRegister({
        data: {
          user_name: this.userInfoForm.real_name,
          job_name: this.userInfoForm.job,
        }
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('提交成功!')
          this.onBack()
        }
      })
    },
    // 当前用户是单位管理员时，提交个人信息和单位信息
    onSubmit () {
      if (window.localStorage.phone == null) {

      } else {
        this.phone = window.localStorage.phone
      }
      // 获取区的id
      if (!this.companyInfoForm.area_no) {
        this.companyInfoForm.company_addrArr = ''
      } else {
        this.companyInfoForm.company_addrArr = this.companyInfoForm.area_id
      }

      console.log('phone=', this.phone)
      PerfectingInfApi.onSubmitRegister({
        data: {
          phone: this.phone,
          user_name: this.userInfoForm.real_name,
          job_name: this.userInfoForm.job,
          company_type: this.companyInfoForm.company_type,
          company_name: this.companyInfoForm.company_name,
          area_id: this.companyInfoForm.company_addrArr,
          addr: this.companyInfoForm.detail_addr,
          legal_name: this.companyInfoForm.legal_name,
          credit_code: this.companyInfoForm.credit_code,
          credit_img: this.companyInfoForm.imgpath,
          logo: '',
          index_img: '',
          ind_domain: ''
        }
      }).then((res) => {
        if (res.code === 0) {
          this.$message.success('操作成功!')
          this.onBack()
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    // 单位类型
    onUnitType (val) {
      console.log('val=', val)
    },
    // 返回事件
    onBack () {
      // 第一步操作记忆值清空
      this.userInfoForm.real_name = ''
      this.userInfoForm.job = ''
      // 第二步操作记忆值清空
      this.companyInfoForm.company_type = ''
      this.companyInfoForm.company_name = ''
      this.companyInfoForm.detail_addr = ''
      this.companyInfoForm.legal_name = ''
      this.companyInfoForm.credit_code = ''
      this.companyInfoForm.credit_img = ''
      this.companyInfoForm.imgpath = ''

      // this.visible = false
      // this.$refs.userInfoForm.resetFields()
      // this.$refs.companyInfoFormRules.resetFields()
      this.$store.dispatch('toggleUserInfoDialogVisible', false)
    },
    // 保存事件
    onSave () {
      if (this.step === 1) {
        this.$refs.userInfoForm.validate((valid) => {
          if (valid) {
            this.PerfectingInformation.real_name = this.userInfoForm.real_name
            this.PerfectingInformation.post_job = this.userInfoForm.job
            this.PerfectingInformation.company_type = ''
            this.PerfectingInformation.credit_img = ''
            this.PerfectingInformation.company_name = ''
            this.PerfectingInformation.detail_addr = ''
            this.PerfectingInformation.legal_name = ''
            this.PerfectingInformation.credit_code = ''
            this.PerfectingInformation.company_addrArr = ''
            // 将一组对象存储在localStorage中
            window.localStorage.setItem('PerfectingInformation', JSON.stringify(this.PerfectingInformation))
            this.$message.success('保存成功')
            console.log('window=', window.localStorage)
          }
        })
      } else {
        // companyInfoForm
        this.$refs.companyInfoForm.validate((valid) => {
          if (valid) {
            // 获取区的id
            if (this.companyInfoForm.area_no == undefined) {
              this.companyInfoForm.company_addrArr = ''
            } else {
              this.companyInfoForm.company_addrArr = this.companyInfoForm.area_no
            }
            this.PerfectingInformation.real_name = this.userInfoForm.real_name
            this.PerfectingInformation.post_job = this.userInfoForm.job
            this.PerfectingInformation.company_type = this.companyInfoForm.company_type
            this.PerfectingInformation.credit_img = this.companyInfoForm.imgpath
            this.PerfectingInformation.company_name = this.companyInfoForm.company_name
            this.PerfectingInformation.detail_addr = this.companyInfoForm.detail_addr
            this.PerfectingInformation.legal_name = this.companyInfoForm.legal_name
            this.PerfectingInformation.credit_code = this.companyInfoForm.credit_code
            this.PerfectingInformation.company_addrArr = this.companyInfoForm.company_addrArr
            // 将一组对象存储在localStorage中
            window.localStorage.setItem('PerfectingInformation', JSON.stringify(this.PerfectingInformation))
            this.$message.success('保存成功')
          }
        })
      }
      console.log('window=', window.localStorage, 'step=', this.step)
    },
    // 上传相关证件
    uploadBusinessImg (params) {
      let formData = new FormData()
      formData.append('module', 'business-img')
      formData.append('pic_file_apk', params.file)
      UploadFileApi.uploadFile({
        data: formData
      }).then(res => {
        // console.log(res, 'upload business img')
        if (res.data) {
          this.companyInfoForm.credit_img = res.data.file_path
          this.companyInfoForm.imgpath = res.data.file_name
        }
        console.log(this.companyInfoForm, 'companyInfo')
      })
    },
    handleCompanylogoSuccess () {

    },
    beforeCompanylogoUpload () {

    },
    // 获取标准码
    getStardandCode () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'companyType',
        }
      }).then((res) => {
        this.companyTypeArr = res.data.list
        // console.log('标准码', res)
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  watch: {
    dialogVisible (newval, oldval) {
      console.log(newval, 'edit user dialog')
      this.visible = newval
    }

  },
  created () {
    this.userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
    this.companyInfo = JSON.parse(window.localStorage.getItem('companyInfo'))
    this.visible = this.dialogVisible
    // console.log('csy=', this.dialogVisible)
    // if (window.sessionStorage.getItem('access_token')) {
    //   this.getStardandCode()
    // }

    // if (this.dialogVisible == false) {

    // } else {
    //   this.getStardandCode()
    // }
  },
  mounted () {
    if (window.localStorage.getItem('access_token')) {
      this.getStardandCode()
    }
  }
}
</script>
<style scoped lang='scss'>
.edit-userInfo-container {
  .dialog-footer {
    text-align: center;
  }
  .img-upload {
    width: 178px;
    height: 178px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #409eff;
    }
    .logo-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .logo {
      width: 178px;
      height: 178px;
      display: block;
    }
  }
}
</style>
